<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="itsm.isperp.framework.core.context.ContextHolder"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%
	String path = request.getContextPath();
	String basePath = ContextHolder.getWebServerName(request);
%>


<script src="<%=path%>/js/libs/exif/exif.js"></script>

<div class="header">
	<h1 class="header_title">意见申报</h1>
</div>
<div class="box" style="overflow: hidden">
	<div style="overflow:hidden;position:relative">
		<div id="process_go">
			<div class="done" id="node1">
				1.选择分类
				<div class="node_go  "></div>
			</div>
			<div class="done" id="node2">
				2.常见问题匹配
				<div class="node_go  "></div>
			</div>
			<div class="doing" id="node3">
				3.确认提交
				<div class="node_go "></div>
			</div>
		</div>
	</div>
</div>




<form class="validate"
	action="<%=path%>/api/wechat/problem/submitProblem" method="post">
	<input type="hidden" id="id" name="id" value="${model.id }">
	<div class="weui-cells weui-cells_form">

		<div class="weui-cell weui-cell_primary">
			<div class="weui-cell_hd">
				<label for="" class="weui-label">意见类型 </label>
			</div>
			<div class="weui-cell__bd  ">${model.nature }</div>
		</div>

		<div class="weui-cell  ">
			<div class="weui-cell_hd">
				<label for="" class="weui-label">大类 </label>
			</div>
			<div class="weui-cell__bd weui-cell_primary">${model.category1Name}</div>

		</div>


		<div class="weui-cell weui-cell_primary">
			<div class="weui-cell_hd">
				<label for="" class="weui-label">小类 </label>
			</div>
			<div class="weui-cell__bd weui-cell_primary">${model.category2Name}</div>
		</div>

		<div class="weui-cell">
			<div class="weui-cell_hd">
				<label class="weui-label">标题 </label>
			</div>
			<div class="weui-cell__bd weui-cell_primary">${model.title }</div>
		</div>


		<div class="weui-cell weui-cell_warn">
			<div class="weui-cell__hd">
				<label class="weui-label">详细描述 </label>
			</div>
		</div>
		<div class="bd" style="padding:0px 15px 5px 15px">
			<textarea id="description" name="description" class="weui-textarea"
				placeholder="请输入详细描述" rows="3"></textarea>
		</div>

		<div class="weui-cell">
			<div class="weui-cell__bd ">
				<div class="weui-uploader">
					<div class="weui-uploader__hd weui-cell">
						<div class="weui-cell__bd weui-cell_primary">图片上传</div>
						<div class="weui-cell_ft js_counter">0/3</div>
					</div>
					<div class="weui-uploader__bd">
						<ul class="weui-uploader__files">
							<!-- 预览图插入到这 -->
						</ul>
						<div class="weui-uploader__input-box">
							<input id="js_file" class="weui-uploader__input js_file"
								type="file" accept="image/jpg,image/jpeg,image/png,image/gif"
								multiple="">
						</div>
					</div>
				</div>
				<div class="bd">
					<div class="info_box">温馨提示：建议在wifi环境下上传图片，或者适当控制图片大小。部分安卓系统暂时不支持图片上传。</div>
				</div>

			</div>



		</div>

		<div class="weui-btn_area">
			<button type="submit" class="weui-btn weui-btn_primary"
				onclick="return submitForm(this)" id="showTooltips">确定提交</button>
		</div>

	</div>
</form>

<div id="weui-dialog_confirm" class="weui-dialog_confirm"
	style="display:none">
	<div class="weui-mask"></div>
	<div class="weui-dialog">
		<div class="weui-dialog__hd">
			<strong class="weui-dialog__title">确认</strong>
		</div>
		<div class="weui-dialog__bd">
			是否删除这张图片？<br>
		</div>
		<div class="weui-dialog__ft">
			<a id="btnCanel" href="javascript:;"
				class="weui-dialog__btn weui-dialog__btn_default">取消</a> <a
				id="btnOk" href="javascript:;"
				class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
		</div>
	</div>
</div>


<script>
	function submitForm(obj) {
		if ($("#description").val() == "") {
			$.weui.alert({
				text : "请填写详细描述！"
			});
			return false;
		}

		$.weui.loadingToast(obj);
		return true;
	}

	function removeImage(num) {

		var $confirm = $('#weui-dialog_confirm');

		$confirm.on('touchend click', '#btnCanel', function() {
			$confirm.hide();
		});
		$confirm.on('touchend click', '#btnOk', function() {
			$("#image" + num).remove();
			$confirm.hide();
		});
		$confirm.show();
	}

	$(function() {
		// 允许上传的图片类型  
		var allowTypes = [ 'image/jpg', 'image/jpeg', 'image/png', 'image/gif' ];

		// 图片最大宽度  
		var maxWidth = 600;
		// 最大上传图片数量  
		var maxCount = 3;
		$('#js_file').on('change', function(event) {
			var files = event.target.files;
			// 如果没有选中文件，直接返回  
			if (files.length === 0) {
				return;
			}

			for (var i = 0, len = files.length; i < len; i++) {
				var file = files[i];
				var reader = new FileReader();
				// 如果类型不在允许的类型范围内  
				

				if ($('.weui-uploader__file_status ').length >= maxCount) {
					$.weui.alert({
						text : '最多只能上传' + maxCount + '张图片'
					});
					return;
				}

				EXIF.getData(file, function() {
					// alert(EXIF.pretty(this));  
					EXIF.getAllTags(this);
					//alert(EXIF.getTag(this, 'Orientation'));   
					Orientation = EXIF.getTag(this, 'Orientation');
					//return;  
				});

				reader.onload = function(e) {
					var img = new Image();
					img.onload = function() {
						// 不要超出最大宽度  
						var w = 0, h = 0;
						// 高度按比例计算  

						if (img.width > maxWidth) {
							w = maxWidth;
							h = img.height * (w / img.width);
						} else {
							w = img.width;
							h = img.height;
						}

						var canvas = document.createElement('canvas');
						var ctx = canvas.getContext('2d');
						// 设置 canvas 的宽度和高度  
						canvas.width = w;
						canvas.height = h;
						
						if (allowTypes.indexOf(file.type) === -1) {
							$.weui.alert({
								text : '您上传的文件格式为：'+file.type;
							});
						}
						ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, w, h);

						var base64 = null;
						//修复ios  
						if (navigator.userAgent.match(/iphone/i)) {
							console.log('iphone');
							//alert(expectWidth + ',' + expectHeight);  
							//如果方向角不为1，都需要进行旋转 added by lzk  
							if (Orientation != "" && Orientation != 1) {

								switch (Orientation) {
								case 6://需要顺时针（向左）90度旋转   
									rotateImg(this, 'left', canvas);
									break;
								case 8://需要逆时针（向右）90度旋转  
									rotateImg(this, 'right', canvas);
									break;
								case 3://需要180度旋转  

									rotateImg(this, 'right', canvas);//转两次  
									rotateImg(this, 'right', canvas);
									break;
								}
							}

							base64 = canvas.toDataURL("image/jpeg", 0.8);
						} else if (navigator.userAgent.match(/Android/i)) {// 修复android  

						} else {
							//alert(Orientation);  
							if (Orientation != "" && Orientation != 1) {
								//alert('旋转处理');  
								switch (Orientation) {
								case 6://需要顺时针（向左）90度旋转  

									rotateImg(this, 'left', canvas);
									break;
								case 8://需要逆时针（向右）90度旋转  

									rotateImg(this, 'right', canvas);
									break;
								case 3://需要180度旋转  

									rotateImg(this, 'right', canvas);//转两次  
									rotateImg(this, 'right', canvas);
									break;
								}
							}

						}

						base64 = canvas.toDataURL("image/jpeg", 600 * 1024 / file.size);
						var num = $('.weui-uploader__file_status ').length + 1;
						// 插入到预览区  
						var $preview = $('<li onclick="removeImage(' + num + ')" id="image' + num + '" class="weui-uploader__file weui-uploader__file_status" style="background-image:url(' + base64 + ')"><div class="weui-uploader__file-content">等待提交</div><input name="image'+num+'" type="hidden" value="'+base64+'"></li>');
						$('.weui-uploader__files').append($preview);

						$('.js_counter').text((num) + '/' + maxCount);

						// 然后上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传  

					};

					img.src = e.target.result;
				};
				reader.readAsDataURL(file);
			}
		});
	});

	//对图片旋转处理 added by lzk  
	function rotateImg(img, direction, canvas) {
		//alert(img);  
		//最小与最大旋转方向，图片旋转4次后回到原方向    
		var min_step = 0;
		var max_step = 3;
		//var img = document.getElementById(pid);    
		if (img == null)
			return;
		//img的高度和宽度不能在img元素隐藏后获取，否则会出错    
		var height = img.height;
		var width = img.width;
		//var step = img.getAttribute('step');    
		var step = 2;
		if (step == null) {
			step = min_step;
		}
		if (direction == 'right') {
			step++;
			//旋转到原位置，即超过最大值    
			step > max_step && (step = min_step);
		} else {
			step--;
			step < min_step && (step = max_step);
		}
		//img.setAttribute('step', step);    
		/*var canvas = document.getElementById('pic_' + pid);   
		if (canvas == null) {   
		    img.style.display = 'none';   
		    canvas = document.createElement('canvas');   
		    canvas.setAttribute('id', 'pic_' + pid);   
		    img.parentNode.appendChild(canvas);   
		}  */
		//旋转角度以弧度值为参数    
		var degree = step * 90 * Math.PI / 180;
		var ctx = canvas.getContext('2d');
		switch (step) {
		case 0:
			canvas.width = width;
			canvas.height = height;
			ctx.drawImage(img, 0, 0);
			break;
		case 1:
			canvas.width = height;
			canvas.height = width;
			ctx.rotate(degree);
			ctx.drawImage(img, 0, -height);
			break;
		case 2:
			canvas.width = width;
			canvas.height = height;
			ctx.rotate(degree);
			ctx.drawImage(img, -width, -height);
			break;
		case 3:
			canvas.width = height;
			canvas.height = width;
			ctx.rotate(degree);
			ctx.drawImage(img, -width, 0);
			break;
		}
	}
</script>